<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width = device-width,user-scalable = no">
	<title>Do</title>
	<script src="MTween.js"></script>
	<style>
	@-webkit-keyframes rotate {
		0% {
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
		100% {
			-webkit-transform: rotateY(360deg);
			transform: rotateY(360deg);
		}
	}
	@-webkit-keyframes rotate {
		0% {
			-webkit-transform: rotateY(0deg);
			transform: rotateY(0deg);
		}
		100% {
			-webkit-transform: rotateY(360deg);
			transform: rotateY(360deg);
		}
	}
	* {
		margin: 0;
		padding: 0;
	}
	body,html {
		background: #fefefe;
		position: relative;
		height: 100%;
	}
	#load {
		position: relative;
		height: 100%;
		-webkit-perspective:300px;
		perspective: 300px;
	}
	#logo2,#logo3 {
		position: absolute;
		display: none;
		left: 20%;
		top: 35%;
		width: 60%;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	#load img {
		display: block;
		width: 100%;
		animation: 3s infinite linear rotate;
	}
	</style>
</head>
<body>
	<div id="load">
		<div id="logo2"><img src="img/1.jpg" alt=""></div>
		<div id="logo3"><img src="img/2.jpg" alt=""></div>
	</div>

	<script>
		var logo2 = document.querySelector('#logo2');
		var logo3 = document.querySelector('#logo3');
		css(logo2,'translateZ',-1000);
		css(logo3,'translateZ',-1000);
		anmt1();
		function anmt1(){
			logo2.style.display = 'block';
			MTween({
				el : logo2,
				target : {
					translateZ : 0,
				},
				time : 340,
				type : 'easeIn',
				callBack : anmt2
			});
		}

		function anmt2(){
			setTimeout(function(){
				MTween({
					el : logo2,
					target : {
						translateZ :-1000,
					},
					time : 800,
					type : 'easeOut',
					callBack :anmt3
				});
			},2000);
		}

		function anmt3(){
			logo3.style.display = 'block';
			MTween({
				el : logo3,
				target : {
					translateZ : 0,
				},
				time : 240,
				type : 'easeIn',
				callBack : anmt4
			});
		}

		function anmt4(){
			setTimeout(function(){
				MTween({
					el : logo3,
					target : {
						translateZ :-1000,
					},
					time : 1200,
					type : 'easeOut',
					callBack : function(){
						anmt1();
						logo3.style.display = 'none';
					}
				});
			},2000);
		}
	</script>
</body>
</html>
